<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fixed解决方案3</title>
</head>
<style>
	* {
	margin: 0;
	padding: 0;
}
html {
	width: 100%;
	background-color: plum;
}
body {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.other {
	position: fixed;
	width: 100%;
	height: 5rem;
	line-height: 5rem;
	text-align: center;
	background-color: orangered;
	z-index: 10000;
}
.container {
	width: 100%;
	height: 100%;
	margin-top: 5rem;
	margin-bottom: 3rem;
	box-sizing: border-box;
	background-color: greenyellow;
}
.container .item {
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	border-bottom: solid 2px gray;
}
.button {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 3rem;
	line-height: 3rem;
	text-align: center;
	background-color: #00b3ee;
}
#test{
	display: none;
}
</style>
<body>
<div class="other">其 他</div>
<div class="container" id="container">
	<div>
		<div class="item">项目0</div>
		<div class="item">项目1</div>
		<div class="item">项目2</div>
		<div class="item">项目3</div>
		<div class="item">项目4</div>
		<div class="item">项目5</div>
		<div class="item">项目6</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目7</div>
		<div class="item">项目8</div>
		<div id="yes" class="item">项目9
		<div id="test">
			<p>测试</p>
			<p>测试</p>
			<p>测试</p>
			<p>测试</p>
			<p>测试</p>
			<p>测试</p>
			<p>测试</p>
			<p>测试</p>
			<p>测试</p>
		</div></div>

	</div>
</div>
<div class="button">按 钮</div>
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="http://momo-project.b0.upaiyun.com/Assets/IOS_FIXED/iscroll-infinite.js"></script>
<script>
	
	function resetFontSize() {
	// if (navigator.userAgent.indexOf('Mobile') !== -1) {
	// 	document.documentElement.style.fontSize = document.documentElement.clientWidth / 1440 * 100 + 'px';
	// } else {
	// 	document.documentElement.style.fontSize = document.documentElement.clientHeight / 1440 * 50 + 'px';
	// }
	if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            var version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                var phoneScale = parseInt(window.screen.width) / 750;
                document.write('<meta name="viewport" content="width=750, minimum-scale = ' + phoneScale +
                    ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
            } else {
                document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
        }
}

window.addEventListener('resize', resetFontSize, false);
resetFontSize();

var $container = document.querySelector('.container');
var $other = document.querySelector('.other');
var $button = document.querySelector('.button');
$container.style.height = (document.documentElement.clientHeight - $other.clientHeight - $button.clientHeight) + 'px';
var myScroll = new IScroll('#container', {
	mouseWheel: true,
	scrollbars: true
});


$("#yes").click(function(){
		$("#test").slideDown(200);
	})
</script>
</body>
</html>